<template>
  <div id="con" v-if="itemInfo">
    <header :class="{'is_fixed' : isFixed}">
      <div>
        <i class="el-icon-back"></i>
      </div>
      <div>
        <p>{{itemInfo.infos.brand.toUpperCase()}}</p>
        <p>￥{{itemInfo.infos.price}}</p>
      </div>
      <div>
        <i class="el-icon-more"></i>
      </div>
      <div class="brand-commit" v-if="top>=640">
        <a :class="this.num==1?'beblack':''" href="">参数</a>
        <a :class="this.num==2?'beblack':''" href="">详情</a>
        <a :class="this.num==3?'beblack':''" href="">品牌</a>
        <a :class="this.num==4?'beblack':''" href="">评论</a>
      </div>
    </header>

    <Swiper :swiperimg="itemInfo" />

    <div id="content_text">
      <h1>{{itemInfo.infos.name}}</h1>
      <p>{{itemInfo.infos.marketPrice}}</p>
      <div class="newprice">
        <span>￥{{itemInfo.infos.price}}</span>
        <span>{{itemInfo.infos.discount}}</span>
        <span
          v-if="itemInfo.infos.product_labels[1]"
        >{{itemInfo.infos.product_labels[1]?itemInfo.infos.product_labels[1].label_text:''}}</span>
      </div>
      <div class="deliver_date">
        <i class="el-icon-time"></i>
        {{itemInfo.infos.deliver_date}}
      </div>
      <div class="endtime">
        <i>闪购</i>
        <div>
          <span>距结束</span>
          <van-count-down :time="time" format="DD 天 HH 小时 mm 分 ss 秒" />
          <!-- <span>02</span>
          <em>天</em>
          <span>06</span>
          <em>小时</em>
          <span>39</span>
          <em>分</em>
          <span>27</span>
          <em>秒</em> -->
        </div>
      </div>
      <div class="service" @click="isShow=true">
        <i>服务</i>
        <div>
          <p>全场满688包邮</p>
          <p>正品保障</p>
          <p>七天无理由退货</p>
        </div>
        <i class="el-icon-caret-right"></i>
      </div>
      <div class="size" v-if="sizeInfo">
        <span>尺码</span>
        <p 
          v-for="(ite,indx) in sizeInfo.size" 
          :key="indx"
          :class="ite.qty>0?'':'saleout'"
        >
          {{ite.sizeId}}
        </p>
        
      </div>
      <div class="parameter" ref="parameter">
        <h2>商品参数</h2>
      </div>
      <div class="pic-title">
        <h2>商品详情</h2>
      </div>
      <div ref="detail">
      <div class="pic" v-for="(item,index) in itemInfo.infos.description.product_img1" :key="index">
        <img :src="item.bigImgUrl" alt />
      </div>
      </div>
      <div class="picword">
        <p>图片及相关信息仅供参照，因拍摄灯光及不同显示器色差等问题可能造成商品图片与实物的色差，一切以实物为准。</p>
      </div>
      <div class="package">
        <h2>包装清单</h2>
        <img :src="itemInfo.infos.packageURL" alt />
        <p>如上图片为魅力惠电商新包装，魅力惠正在进行包装升级，过渡期间新老包装随机发货，敬请知晓。</p>
      </div>
      <div class="brand" ref="brand">
        <div>
          <h2>{{itemInfo.infos.brand}}</h2>
          <i class="el-icon-caret-right"></i>
          <p>品牌主页</p>
        </div>
      </div>
      <div class="cannot">
        <img :src="itemInfo.infos.postSellUrls" alt />
      </div>
      <div class="commit" ref="commit">
        <div>
          <h2>用户评论</h2>
          <i class="el-icon-caret-right"></i>
          <p>查看全部</p>
        </div>
      </div>
      <div class="look">
        <h2>大家都在看</h2>
      </div>
    </div>
    <div id="cover" v-if="isShow">
      <div class="cover-box">
        <div class="box-a">
          <h2>魅力惠服务</h2>
        </div>
        <div class="box-b">
          <div>
            <dl class="service-item">
              <dt>全场满688包邮</dt>
              <dd>单笔订单折后总金额满人民币688元将享受免运费配送，不足金额订单，统一收取10元邮费，无续重费</dd>
            </dl>
          </div>
          <div>
            <dl class="service-item">
              <dt class>正品保障</dt>
              <dd>魅力惠以“品牌官方授权”为核心，直接与签约的品牌合作。坚持和品牌商合作共赢，只卖正品，将更多国际顶级高品质大牌带给中国的时尚消费者，不断完善和优化用户体验，这就是魅力惠一直为之坚持的方向。</dd>
              <dd>
                <div class="cert">
                  <img
                    src="https://cdn12.mei.com/h5_vue/static/img/pic_promise2.a01070c.jpg"
                    alt
                  />
                </div>
              </dd>
            </dl>
          </div>
          <div>
            <dl class="service-item">
              <dt>七天无理由退货</dt>
              <dd>消费者在满足7天无理由退换货申请条件的前提下，可提出“7天无理由退换货”的申请</dd>
            </dl>
          </div>
        </div>
        <div class="box-c" @click="isShow=false">
          <h2>确定</h2>
        </div>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <footer>
      <div>
        <i class="el-icon-shopping-bag-2"></i>

        <p>
          购物袋
          <span>1</span>
        </p>
      </div>
      <div @click="show=!show">加入购物车</div>
      <div @click="show=!show">立即购买</div>
    </footer>
    <Buynow 
      v-if="show"
      :price='itemInfo.infos.price'
      :img='itemInfo.infos.images[0].bigImgUrl'
      :name='itemInfo.infos.name'
    />
  </div>
</template>

<script>
import Buynow from './Buynow'
import Swiper from "./Swiper";
import {getGoodsDetail, getGoodsSize} from '../api/details'
import Vue from 'vue';
import { CountDown } from 'vant';

Vue.use(CountDown);

export default {
  components: {
    Swiper,
    Buynow
  },
  data() {
    return {
      itemInfo: null,
      sizeInfo:null,
      isFixed: false,
      isShow: false,
      top:0,
      num:0,
      id1:20872087,
      id2:99000004487,
      time:1656000,
      show:false
    };
  },
  methods: {
    handleScroll() {
      let scrollTop = window.pageYOffset; 
      this.top=scrollTop
      // 滚动条偏移量
      this.isFixed = scrollTop > 100 ? true : false;

      let a=this.$refs.parameter.getBoundingClientRect().top
      let b=this.$refs.detail.getBoundingClientRect().top
      let c=this.$refs.brand.getBoundingClientRect().top
      let d=this.$refs.commit.getBoundingClientRect().top
      if(a<80){
        this.num=1
      }
      if(b<80){
        this.num=2
      }
      if(c<80){
        this.num=3
      }
      if(d<80){
        this.num=4
      }
    },
  },
  async created () {
    let res = await getGoodsDetail(this.id1,this.id2)
    this.itemInfo=res.data
    console.log(res.data)
    this.time=res.data.infos.itemPriceDto.end-res.data.infos.itemPriceDto.begin

    let res1 = await getGoodsSize(this.id1,this.id2)
    this.sizeInfo=res1.data.infos
    console.log(res1.data.infos)
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
  },
};
</script>

<style lang="scss" scoped>
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
@import url("../assets/css/details.css");
</style>